<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">
    <!--3 使用组件 自定义组件如果是驼峰标识，则需要使用 - 分割-->
    <my-com1></my-com1>
    <my-com2></my-com2>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>
    // 组件创建方式1
    // 1 创建组件
    let com1 = Vue.extend({
        template: '<h2>hello world</h2>'
    });
    // 2 注册组件， Vue.component(组件名称, 组件对象)， 组件名称就是页面要使用的标签名称
    Vue.component('myCom1', com1);


    // 组件创建方式2
    Vue.component('myCom2', {
        // 注意：该方式不可以，template对应的模板只能有一个根元素，不能存在两个平级的并列根元素
        // template: '<h2>hello world2</h2><h3>hello a</h3>'
        // 该方式可以
        template: '<div style="display: inline-flex;"><h1>hello world</h1><h3>2</h3></div>'
    });

    var vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {

        },
    });
</script>
</body>
</html>
